<template>
  <el-row class="mb-4">
    <el-button>返回</el-button>
    <el-button type="success" @click="showAddDialog()">添加</el-button>
  </el-row>
  <div class="demo-image">
    <el-table :data="fits" style="width: 100%">
      <el-table-column prop="uid" label="ID" width="100" />
      <el-table-column prop="username" label="用户名" width="100" />
      <el-table-column prop="password" label="密码" />
      <el-table-column prop="utime" label="时间" :formatter="formatDate" />
      <el-table-column prop="ucount" label="余额" />
      <el-table-column prop="uemil" label="邮箱" />
      <el-table-column prop="pid" label="权限" :formatter="formatPermission" />

      <el-table-column label="操作" width="200">
        <template #default="{ row }">
          <div style="display: flex">
            <div style="flex: 1; margin-right: 10px">
              <el-button type="warning" @click="showEditDialog(row)">
                修改
              </el-button>
            </div>
            <div style="flex: 1">
              <el-button type="danger" @click="deleteItem(row.uid)">
                删除
              </el-button>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="1"
      @current-change="2"
      :current-page="2"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="21"
    />
    <el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="500">
      <el-form :model="form">
        <el-form-item label="用户名" :label-width="100">
          <el-input v-model="form.username" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码" :label-width="100">
          <el-input v-model="form.password" autocomplete="off" />
        </el-form-item>
        <el-form-item label="时间" :label-width="100">
          <el-date-picker
            v-model="form.utime"
            type="date"
            placeholder="选择日期"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="余额" :label-width="100">
          <el-input v-model="form.ucount" autocomplete="off" />
        </el-form-item>
        <el-form-item label="邮箱" :label-width="100">
          <el-input v-model="form.uemil" autocomplete="off" />
        </el-form-item>
        <el-form-item label="权限" :label-width="100">
          <el-input v-model="form.pid" autocomplete="off" />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="insertOk()">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import request from '@/utils/request'
import { onMounted, reactive, ref } from 'vue'
let isId = 0
const fits = reactive([])
// 弹出层相关
const dialogFormVisible = ref(false)
const dialogTitle = ref('')
const form = reactive({
  uid: '',
  username: '',
  password: '',
  utime: '',
  ucount: '',
  uemil: '',
  pid: '',
})
const showAddDialog = () => {
  dialogTitle.value = '添加数据'
  dialogFormVisible.value = true
}
const formatPermission = (row) => {
  return row.pid === 1 ? '用户' : row.pid === 2 ? '管理员' : ''
}
const insertOk = async () => {
  dialogFormVisible.value = false
  let url = 'http://127.0.0.1:8080/api/user/add'
  console.log(isId)
  if (isId == 1) {
    url = 'http://127.0.0.1:8080/api/user/update'
  }
  console.log(url)
  isId = 0
  try {
    const response = await request.post(url, form, {
      headers: {
        'Content-Type': 'application/json',
      },
    })
    console.log(response.data)
    return response.data // 返回响应数据，根据需要进行处理
  } catch (error) {
    console.error(error)
    throw error // 抛出异常，供调用方处理
  }
  getAll()
}
// 打开修改弹出层
const showEditDialog = (row: any) => {
  dialogTitle.value = '修改数据'
  dialogFormVisible.value = true
  for (const key in row) {
    if (Object.hasOwnProperty.call(row, key)) {
      form[key] = row[key]
    }
  }
  isId = 1
}
onMounted(() => {
  getAll()
})
let getAll = async () => {
  try {
    const result = await request.get('http://127.0.0.1:8080/api/user/getAll', {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
    })
    fits.push(...result.records)
    console.log(fits)
  } catch (err) {
    console.error(err)
  }
}
let formatDate = (row, column) => {
  // 假设您的日期数据是一个字符串，您可以在这里将其转换为合适的格式
  const dateStr = row.utime
  const date = new Date(dateStr)

  // 使用您喜欢的日期格式化库格式化日期，比如 date-fns、moment.js 等
  // 这里是一个简单的示例
  const formattedDate = date.toLocaleString() // 这将以本地化的格式返回日期字符串

  return formattedDate
}
const deleteItem = (id: number) => {
  deleteData(id)
}
const deleteData = async (id: number) => {
  try {
    const response = await request.delete(
      `http://127.0.0.1:8080/api/user/delete/${id}`,
    )
    console.log(response.data)
    // 在这里处理删除成功后的逻辑，比如刷新数据等
    getAll()
  } catch (error) {
    console.error(error)
    // 在这里处理删除失败后的逻辑
  }
}
</script>

<style scoped>
.demo-image .block {
  padding: 30px 0;
  text-align: center;
  /* border-right: solid 1px var(--el-border-color); */
  display: inline-block;
  width: 20%;
  box-sizing: border-box;
  vertical-align: top;
}

.demo-image .block:last-child {
  border-right: none;
}

.demo-image .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>
